<script setup lang="ts">
import { computed, ref } from 'vue'
import { router } from '@/router'
import { RouterView } from 'vue-router'
import { childrenRouter } from '@/router/reportRouter'
const defaultProps = ref()
const controlData = ref({})
const editableTabs = ref<any>([])
const activeName = ref('')
const treeKey = ref('/statistics/stay/index')
const handleNodeClick = (data?) => {
  if (data.children.length === 0) {
    activeName.value = data.name
    treeKey.value = data.url
    RoutingJump(data.url)
    if (!controlData.value[data.name]) {
      controlData.value[data.name] = data
      editableTabs.value.push(controlData.value[data.name])
    }
  }
}

const handleClick = (data) => {
  treeKey.value = controlData.value[data.paneName].url
  RoutingJump(controlData.value[data.paneName].url)
}
function RoutingJump(url) {
  router.push({ path: '/' + url })
}
const remove = (val) => {
  if (editableTabs.value.length === 1) {
    return
  }
  editableTabs.value = editableTabs.value.filter((tab: any) => tab.name !== val)
  delete controlData.value[val]
  console.log(editableTabs.value)
  activeName.value = editableTabs.value[editableTabs.value.length - 1].name
  // console.log(controlData.value)
}
</script>
<template>
  <div class="home">
    <div class="left">
      <el-tree
          ref="treesa"
          default-expand-all
          :data="childrenRouter"
          :props="defaultProps"
          highlight-current
          accordion
          node-key="url"
          :current-node-key="treeKey"
          @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span> <i :class="data.icon"></i>{{ data.name }} </span>
          </span>
        </template>
      </el-tree>
    </div>
    <div class="right">
      <div class="tabs-container">
        <div class="tabs-item">
          <el-tabs v-model="activeName" class="tabs-item-style-1" @tab-click="handleClick" @tab-remove="remove">
            <el-tab-pane v-for="tab in editableTabs" :key="tab.url" :label="tab.name" :name="tab.name" closable>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home {
  display: flex;
  position: absolute;
  inset: 0;
  background-color: white;
}
.left {
  padding: 20px;
  width: 15%;
}
.right {
  width: 85%;
  display: flex;
  flex-direction: column;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.a {
  transform: translateY(3px);
  display: inline-block;
  width: 15px;
  height: 15px;
  /* border: 1px solid#000; */
  background: url(../../../assets/navigation.png) no-repeat;
  background-size: 15px;
}
.tabs-container {
  display: flex;
  position: relative;
  z-index: 6;
  height: 40px;
  background-color: #fff;
  .tabs-item {
    transition: left 0.3s;
    flex-grow: 1;
    overflow: hidden;
    ::v-deep(.el-tabs__nav-prev) {
      padding: 0 10px;
      border-right: var(--el-border-color-extra-light) 1px solid;
    }
    ::v-deep(.el-tabs__nav-next) {
      padding: 0 10px;
      border-left: var(--el-border-color-extra-light) 1px solid;
    }
    ::v-deep(.is-scrollable) {
      padding: 0 32px;
    }
    ::v-deep(.el-tabs__active-bar) {
      height: 0;
    }
    ::v-deep(.el-tabs__item) {
      .is-icon-close {
        transition: none !important;
        &:hover {
          color: var(--el-color-primary-light-9);
          background-color: var(--el-color-primary);
          border-radius: 50%;
        }
      }
    }
  }
}
.tabs-item-style-1 {
  ::v-deep(.el-tabs__item) {
    padding: 0 15px !important;
    border-right: var(--el-border-color-extra-light) 1px solid;
    user-select: none;
    color: #8c8c8c;
    &:hover {
      color: #444;
      background: rgba(0, 0, 0, 0.02);
    }
    &.is-active {
      .el-dropdown {
        color: var(--el-color-primary) !important;
      }
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
      border-bottom: var(--el-border-color-light) 2px solid;
      &:before {
        background-color: var(--el-color-primary);
      }
    }
    &:before {
      content: '';
      width: 9px;
      height: 9px;
      margin-right: 8px;
      display: inline-block;
      background-color: #ddd;
      border-radius: 50%;
    }
  }
}
</style>
